<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">
// Using the core $.ajax() method
$( document ).ready(function() {
$.ajax({
    // the URL for the request
    url: "http://localhostz:8080/spruce/os",
 
    // the data to send (will be converted to a query string)
    data: {
        "id": 0,
        "vendor": "microsoft",
        "product": "windows",
        "version": "xp"
    },
    
    // whether this is a POST or GET request
    type: "POST",
 
    // the type of data we expect back
    dataType : "json",
 
    // code to run if the request succeeds;
    // the response is passed to the function
    success: function( json ) {
        $( "<h1/>" ).text( json.title ).appendTo( "body" );
        $( "<div class=\"content\"/>").html( json.html ).appendTo( "body" );
    },
 
    // code to run if the request fails; the raw request and
    // status codes are passed to the function
    error: function( xhr, status, errorThrown ) {
        alert( "Sorry, there was a problem!" );
        console.log( "Error: " + errorThrown );
        console.log( "Status: " + status );
        console.dir( xhr );
    },
 
    // code to run regardless of success or failure
    complete: function( xhr, status ) {
        alert( "The request is complete!" );
    }
})};

</script>

</head>
<body>
<h1>Spruce IT</h1>
</body>
</html>